<template>
	<view class="con">
		<view class="head">
			<view class="head-box">
				<view class="head-box-num">{{dataList['nums'] || '--'}}</view>
				<view class="head-box-info">拨号</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #00aa00;">{{dataList['success_nums'] || '--'}}</view>
				<view class="head-box-info">已拨通</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #ff0000;" >{{dataList['nums']-dataList['success_nums'] || '--'}}</view>
				<view class="head-box-info">未拨通</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #00aa00;">{{dataList['connect_nums'] || '--'}}</view>
				<view class="head-box-info">IPv4联网</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #00aa00;">{{dataList['v6connect_nums'] || '--'}}</view>
				<view class="head-box-info">IPv6联网</view>
			</view>
		</view>
		
		<view class="admin">
			管理网卡：{{dataList['manager']['name'] || '加载中...'}} | 速率：{{dataList['manager']['speed'] || '加载中...'}}M | ip: {{dataList['manager']['ip'] || '加载中...'}}
		</view>
		
		<view class="data-info" v-for="(item,index) in netcardlist">
			<view class="data-info-head">
				数据网卡：{{item.name || '加载中...'}} | 速率：{{item.speed || '加载中...'}}M | ip: {{item.ip || '加载中...'}}
			</view>
			<view class="data-info-nums">
				共{{netcardlist.length}}条线路
			</view>
			<view class="data-info-title" >
				<view class="vlan">
					PPP网口
				</view>
				<view class="numinfo">
					拨号信息
				</view>
				<view class="close" @tap="delAll">
					拨号结果
				</view>
			</view>
			<view class="data-info-title-line">
				<view class="vlan-line">
					ppp{{item.adslNum}}
				</view>
				<view class="numinfo-line">
					<view class="">vlan_id:{{item.vlanId}}</view>
					<view class="">账号:{{item.account}}</view>
					<view class="">密码:{{item.password}}</view>
					<view class="">网络:{{item.nat|| '--'}}</view>
				</view>
				<view class="close-line" @tap="delAll">
					<view class="">{{item.result}}</view>
					<view class="">IPv4</view>
				</view>
			</view>
		</view>
		
		
		<view class="btn-one" v-if="status == 1" @tap="updateline" style="background-color: #55aaff;color: #FFFFFF;">调整线路</view>
		<view class="btn-one" v-else>设备离线</view>
		<view class="btn-two" @tap="netcardinfo">同步网卡信息</view>
	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				dataInfo:[],
				nodeID:'',
				manager:'',
				traffic:'',
				success:0,
				fail:0,
				I4:0,
				I6:0,
				status:0,
				dataList:[],
				netcardlist:[]
			}
		},
		
		onLoad(option) {
			console.log(option)
			this.nodeID = option.nodeID
			this.getInfo()
		},
		
		methods: {
			getInfo(){
				uni.showLoading({
					title:'加载中'
				})
				let	num_s = 0;
				let	num_f = 0;
				let	num_s4 = 0;
				let	num_s6 = 0;
				this.$api.interfaceApi('bgipushinfo')({
					nodeId:this.nodeID,
					//sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.dataList = res
						this.netcardlist = res.value
						// this.status = res.data.info.status
						// this.success = num_s
						// this.fail = num_f
						// this.I4 = num_s4
						// this.I6 = num_s6
						// this.info = res.data.info
						// this.nodeID = res.data.info.nodeID
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			//同步网卡信息
			netcardinfo(){
				this.getInfo()
			},
			
			updateline(){
				uni.navigateTo({
					url:'/pages/equipment/update-number?nodeID='+this.nodeID
				})
			}
			
			
		}
	}
</script>

<style lang="scss">
	.con{
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		
		.head{
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			.head-box{
				padding: 20rpx 0;
				box-sizing: border-box;
				text-align: center;
				
				.head-box-num{
					padding: 20rpx;
					box-sizing: border-box;
				}
				.head-box-info{
					color: #666666;
					font-size: 26rpx;
				}
			}
			
		}
		
		.admin{
			margin-top: 20rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}
		
		.data-info{
			margin-top: 20rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			background-color: #FFFFFF;
			
			.data-info-head{
				//display: flex;
				padding: 30rpx 20rpx 0 20rpx;
				box-sizing: border-box;
			}
			
			.data-info-nums{
				padding: 0rpx 20rpx 30rpx 20rpx;
				box-sizing: border-box;
			}
			
			.data-info-title{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				font-weight: bolder;
				background-color: #75cae645;
				.vlan{
					width: 20%;
				}
				.numinfo{
					width: 40%;
				}
				.close{
					width: 40%;
				}
			}
			
			.data-info-title-line:nth-of-type(even){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				
				
				.vlan-line{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-line{
					width: 40%;
				}
				.close-line{
					width: 40%;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}
			
			.data-info-title-line:nth-of-type(odd){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				background-color: #75cae645;
				.vlan-line{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-line{
					width: 40%;
				}
				.close-line{
					width: 40%;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}	
		}
		
		.btn-one{
			background-color: #e0e0e0;
			text-align: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
		
		.btn-two{
			border: 1rpx solid #e0e0e0;
			text-align: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
	}
</style>
